
<template>
  <div class="container">
    <h1 style="text-align: center; font-weight: bold;">❤️ 颐小护：守护万千客户的健康~ ❤️</h1>

    <div id="responseWrapper">
      <div id="response" ref="responseDiv">

        <div v-for="(message, index) in chatMessages" :key="index" class="message-bubble" :class="{'user-message': message.isUser}">
          <div v-if="!message.isUser" class="avatar"></div> <!-- AI头像 -->
          <div class="bubble">
            {{ message.text }}
          </div>
          <div v-if="message.isUser" class="avatar user-avatar"></div> <!-- 用户头像 -->
        </div>

      </div>
    </div>

    <div class="input-group">
      <div class="avatar user-avatar"></div>
      <input
          type="text"
          id="messageInput"
          placeholder="请输入问题..."
          v-model.trim="message"
          ref="myinput"
          class="text-input"
      />
      <button id="submitBtn" @click="mes">提交</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const responseDiv = ref(null);
const myinput = ref(null);
const message = ref('');
const chatMessages = ref([
  { text: "欢迎来到颐小护的世界！🎉在这里你可以问好多关于护理、膳食、健康方面的问题，我都可以帮助你解答哦~ 🧑‍⚕️💚 无论是健康小贴士，还是膳食建议，我都能帮你！😊随时提问吧！", isUser: false }
]);

const mes = () => {
  // 用户输入的内容先作为用户消息显示
  chatMessages.value.push({ text: message.value, isUser: true });

  // 使用 fetch 向后端发送请求，获取返回的结果
  fetch(`http://127.0.0.1:9000/deepseek/chat?msg=${encodeURIComponent(message.value)}`)
      .then(response => response.text()) // 获取后端的纯文本响应
      .then(data => {
        // 处理返回的数据并显示在消息列表中
        chatMessages.value.push({ text: data, isUser: false });
      })
      .catch(error => {
        console.error('Error fetching the response:', error);
      });

  message.value = ''; // 清空输入框
};


</script>

<style>
#responseWrapper {
  background-color: #f8f0e3;
  margin: 24px auto;
  padding: 16px;
  border-radius: 12px;
  max-width: 800px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
  white-space: pre-wrap;
  font-family: 'Arial', sans-serif;
  color: #3f2f2f;
  line-height: 1.6;
  min-height: 400px;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中对话框 */
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.input-group .avatar {
  width: 60px;
  height: 100px;
  border-radius: 50%;
  background-image: url('../assets/questioner.png'); /* 自定义用户头像 */
  background-size: cover;
  background-position: center;
  margin-right: 10px;
}

.text-input {
  border: 2px solid #4CAF50;
  padding: 10px;
  border-radius: 25px;
  font-size: 16px;
  width: 70%;
  box-sizing: border-box;
  margin-right: 10px;
}

button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}



.message-bubble {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  justify-content: flex-start;
}

.bubble {
  background-color: #e0e0e0;
  padding: 12px;
  border-radius: 20px;
  max-width: 70%;
  word-wrap: break-word;
  position: relative;
}

.user-message {
  justify-content: flex-end;
}

.user-message .bubble {
  background-color: #4CAF50;
  color: white;
  border-radius: 20px 20px 0 20px;
}

.avatar {
  width: 45px;
  height: 100px;
  border-radius: 50%;
  background-image: url('../assets/assistant.png'); /* 自定义AI头像 */
  background-size: cover;
  background-position: center;
  margin-right: 8px;
}

.user-avatar {
  width: 60px;
  height: 100px;
  background-image: url('../assets/questioner.png'); /* 自定义用户头像 */
  background-size: cover;
  background-position: center;
  margin-left: 8px;
}

.bubble:after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #e0e0e0;
}

.user-message .bubble:after {
  border-top-color: #4CAF50;
}

.message-bubble.user-message {
  justify-content: flex-end;
}
</style>
